<template>
    <div class="user-info-container">
      <!-- 个人信息概览卡片 -->
      <el-card class="info-card">
        <template #header>
          <div class="card-header">
            <span>个人信息概览</span>
            <el-button type="primary" size="small">编辑资料</el-button>
          </div>
        </template>
        <div class="user-basic-info">
          <div class="avatar-container">
            <el-avatar :size="100" icon="el-icon-user-solid"></el-avatar>
          </div>
          <div class="info-list">
            <div class="info-item">
              <span class="label">用户昵称：</span>
              <span class="value">张三</span>
            </div>
            <div class="info-item">
              <span class="label">注册时间：</span>
              <span class="value">2024-01-01</span>
            </div>
            <div class="info-item">
              <span class="label">手账数量：</span>
              <span class="value">5本</span>
            </div>
          </div>
        </div>
      </el-card>
  
      <!-- 旅游足迹卡片 -->
      <el-card class="travel-card">
        <template #header>
          <div class="card-header">
            <span>我的旅游足迹</span>
          </div>
        </template>
        <div class="travel-history">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.date"
              :type="activity.type"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-card>
  
      <!-- 收藏的景点卡片 -->
      <el-card class="spots-card">
        <template #header>
          <div class="card-header">
            <span>收藏的景点</span>
          </div>
        </template>
        <div class="spots-grid">
          <el-tag
            v-for="spot in favoriteSpots"
            :key="spot.id"
            class="spot-tag"
            effect="plain"
          >
            {{ spot.name }}
          </el-tag>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    name: 'UserInfo',
    data() {
      return {
        activities: [
          {
            content: '制作了西安城墙一日游手账',
            date: '2024-03-15',
            type: 'primary'
          },
          {
            content: '查询了华山景区信息',
            date: '2024-03-10',
            type: 'success'
          },
          {
            content: '收藏了兵马俑景点',
            date: '2024-03-05',
            type: 'info'
          }
        ],
        favoriteSpots: [
          { id: 1, name: '兵马俑' },
          { id: 2, name: '华山' },
          { id: 3, name: '大雁塔' },
          { id: 4, name: '西安城墙' },
          { id: 5, name: '华清池' },
          { id: 6, name: '陕西历史博物馆' }
        ]
      }
    }
  }
  </script>
  
  <style scoped>
  .user-info-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .info-card, .travel-card, .spots-card {
    margin-bottom: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .user-basic-info {
    display: flex;
    align-items: flex-start;
    padding: 20px 0;
  }
  
  .avatar-container {
    margin-right: 40px;
  }
  
  .info-list {
    flex: 1;
  }
  
  .info-item {
    margin-bottom: 15px;
    font-size: 14px;
  }
  
  .info-item .label {
    color: #606266;
    margin-right: 10px;
  }
  
  .info-item .value {
    color: #303133;
    font-weight: 500;
  }
  
  .travel-history {
    padding: 20px 0;
  }
  
  .spots-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
  }
  
  .spot-tag {
    cursor: pointer;
  }
  
  .spot-tag:hover {
    background-color: #ecf5ff;
  }
  
  /* 响应式布局 */
  @media screen and (max-width: 768px) {
    .user-basic-info {
      flex-direction: column;
      align-items: center;
    }
  
    .avatar-container {
      margin-right: 0;
      margin-bottom: 20px;
    }
  }
  </style>
<!-- 这个用户信息页面包含以下主要功能和特点：
个人信息概览：
用户头像
用户昵称
注册时间
已制作的手账数量
编辑资料按钮
旅游足迹：
时间线形式展示用户的活动历史
包括手账制作、景点查询、收藏等活动
不同类型的活动使用不同的颜色标识
收藏的景点：
标签形式展示用户收藏的陕西景点
标签可交互（后续可添加点击跳转功能）
4. 样式特点：
清晰的卡片式布局
响应式设计，适配移动端
统一的视觉风格
良好的间距和层次感
这个界面设计符合"只此秦旅"项目的主题，突出展示了用户在陕西旅游相关的活动和偏好。后续可以根据需要添加更多功能，如：
手账制作统计
常用景点推荐
用户偏好设置
互动记录等 -->